<template>
	<view>
		<view class="factory_box bgcf" :class="highlight_first&&index==0?'factory_border':''" v-for="(item,index) in list" :key="index"
			@click="goPage('/subPack/factoryDetails/factoryDetails', item.uid)" :style=" 'margin-bottom:' + mb + 'rpx' ">
			<view class="df ac sb">
				<view :class="item.doorboard != '' && item.doorboard ? 'factory_img' : 'factory_img df ac jc fc'">
					
					<view class="" style="width: 100%;height:100%;" v-if="item.doorboard != '' && item.doorboard">
						<image :src="getImgSrc(item.doorboard)" mode="aspectFill">
						</image>
						<view class=""
							style="position: absolute;left: 10rpx;top: 10rpx;width: 100rpx;height: 36rpx;">
							<image
								style="position: absolute;left: 0rpx;top: 1rpx;width: 100rpx;border-radius: 0rpx;"
								src="@/static/icon/rzns_icon.png" mode="widthFix"></image>
							<view class="factory_year">
								入驻{{ getYear(item.created_at) }}年
							
							</view>
						</view>
					</view>
					<view class="" v-else>
						<view class="df jc">
							<image style="width:80rpx;"
								:src="getImgSrc('/uploads/20241023/17296638126718934463b45.png')"
								mode="widthFix"></image>
						</view>
						<view class="mt10" style="color:#BBBBBB;">
							未上传形象照
						</view>
					</view>
				</view>
				<view class="factory_content">
					<h2 class="f16 c28 f600 mt5 factory_title" style="font-size: 32rpx;">{{ item.company }}</h2>
					<view class="df ac mt5" style="width: 100%;">
						<view class="df ac" :style="isIndex ? 'margin-right:10rpx;' : 'width:auto;max-width:180rpx;margin-right:2rpx;'" v-if="item.latitude != '0' && item.longitude != '0'">
							<view class="df ac " style="transform: translateY(3rpx);">
								<uni-icons type="location" color="#1050c7" :size="isIndex ? 19 : 22"></uni-icons>
								<!-- <image style="width: 30rpx;" src="../../static/ditubiao.png" mode="widthFix"></image> -->
							</view>
							<view :class="isIndex ? 'f13 c10' : 'f12 c10'">
								距您{{ item.distance_in_km}}{{item.unit}}
							</view>
						</view>
						<!-- 至尊会员 -->
						<view class="df ac mr5" v-if="item.grade === 2 && item.grade_type === 1">
							<image :style=" isIndex ? 'height: 38rpx;' : 'height: 35rpx;'" :src="getImgSrc('/uploads/20250228/174070970167c11f451f7ad.png')" mode="heightFix">
							</image>
						</view>
						<!-- 基础会员 -->
						<view class="df ac mr5" v-if="item.grade === 2 && item.grade_type === 0">
							<image :style=" isIndex ? 'height: 38rpx;' : 'height: 35rpx;'" :src="getImgSrc('/uploads/20250228/174070968667c11f3636140.png')" mode="heightFix">
							</image>
						</view>
						<view class="df ac" v-if="item.state === 1">
							<image :style=" isIndex ? 'height: 52rpx;' : 'height: 48rpx;' " src="@/static/icon/gsrz_icon.png" mode="heightFix">
							</image>
						</view>
						<!-- v-if="!item.machining && !item.service_industry && !item.staff && !item.annual_output_value && item.basic && item.basic != 'null'" -->
						<!-- <view class="df ac" >
							<view class="df ac mr5">
								<image :style=" isIndex ? 'height: 50rpx;' : 'height: 48rpx;' " src="@/static/icon/Business_license.png" mode="heightFix">
								</image>
							</view>
							<view class=""  style="color:#1050c7">
								营业执照已审核
							</view>
						</view> -->
					</view>
					<!-- v-if="item.machining && item.service_industry && item.staff && item.annual_output_value" -->
					<view class="df ac mt5" style="width: 100%;">
						<view class="factory_content_name f14">工艺：</view>
						<view class="factory_content_text f14">
							{{ item.machining ? item.machining : '--' }}
						</view>
					</view>
					<!-- v-if="item.service_industry" -->
					<view class="df ac mt5" style="width: 100%;">
						<view class="factory_content_name f14">行业：</view>
						<view class="factory_content_text f14">
							{{ item.service_industry ? item.service_industry : '--'}}
						</view>
					</view>
					<view class="mt5 f14"
						style="width: 100%;color:gray;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display:flex;align-items:center;justify-content:center">
					<!-- 	员工数：{{ item.staff ? item.staff : '--' }} &nbsp;&nbsp;
						工厂面积：{{ item.annual_output_value ? item.annual_output_value : '--'}} -->
						
						<view style="display:flex;flex-direction: column;width:50%;text-align:center;border-right:1px solid #D1D1D1;">
							<view>员工数：</view>
							<view>{{ item.staff ? item.staff : '--' }}</view>
						</view>
						<view style="display:flex;flex-direction: column;width:50%;text-align:center">
							<view>工厂面积：</view>
							<view>{{ item.factory_area ? item.factory_area : '--'}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="factory_img_box df mt10" v-if="item.machining_products && item.machining_products.length != 0">
				<view class="factory_img_item" style="margin-right: 22rpx;"
					v-for="(product,idx) in item.machining_products.slice(0,4)" :key="idx">
					<image v-if="checkType(product.url)" :src="getImgSrc(product.url[0])" mode="aspectFill">
					</image>
					<image v-else :src="getImgSrc(product.url)" mode="aspectFill">
					</image>
				</view>
			</view>
			<view class="highlight-card" v-if="highlight_first">
				<view class="highlight-box"></view>
				<image :src="getImgSrc('/uploads/20240925/172723812766f38fef41cdd.png')" mode="aspectFill">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'FactoryInfo',
		props:{
			list:{
				type: Array,
				default: []
			},
			// 突出显示第一个
			highlight_first: {
				type: Boolean,
				default: false
			},
			mb:{
				type: Number,
				default: 0
			},
			query:{
				type:String,
				default:'uid'
			},
			isIndex:{
				type: Boolean,
				default:true
			}
		},
		watch: {
			list: {
				handler(val, oldVal) {
					val.forEach(item => {
						if (!item.unit) {
							item.unit = "公里"
							// 超过一百公里
							if (item.distance_in_km >= 100) {
								item.distance_in_km = parseInt(item.distance_in_km)
							} else if (item.distance_in_km >= 1 && item.distance_in_km < 100) {
								// 大于一公里小于100公里
								item.distance_in_km = (item.distance_in_km).toFixed(1)
							} else {
								item.distance_in_km = parseInt(item.distance_in_km * 1000)
								item.unit = "米"
							}
						}
					})
				},
				immediate: true
			}
		},
		data() {
			return {
				
			};
		},
		
		methods:{
			checkType(data){
				return Array.isArray(data)
			},
			getYear(data) {
				const inputDate = new Date(data);
				const currentDate = new Date();
				const yearDiff = currentDate.getFullYear() - inputDate.getFullYear();
				const currentMonth = currentDate.getMonth();
				const currentDay = currentDate.getDate();
				const inputMonth = inputDate.getMonth();
				const inputDay = inputDate.getDate();
				// const year = yearDiff + 1
				const year = yearDiff
				return year
			},
			goPage(path,id){
				uni.navigateTo({
					url: id ? `${path}?id=${id}` : path
				})
			}
		}
	}
</script>

<style lang="scss">
	.highlight-card {
		position: absolute;
		right: 0;
		top: 0;
		height: 70rpx;
		width: 100rpx;
		overflow: hidden;
	
		.highlight-box {
			position: absolute;
			width: 200rpx;
			height: 200rpx;
			background: #4874CB;
			transform: rotate(-45deg);
			transform-origin: center;
			top: -150%;
			left: 35px;
		}
	
		// ::after {
		// 	content: "";
	
		// }
	
		display:flex;
		align-items:center;
		justify-content: flex-end;
	
		image {
			width: 30rpx;
			z-index: 9;
			position: absolute;
			height: 30rpx;
			top: 10rpx;
			right: 4rpx;
		}
	}
	
	.factory_border {
		border: 1px solid #4874CB;
		border-radius: 0 !important;
		position: relative;
	}
	
	.factory_box {
		background-color: #FFF;
		padding: 20rpx;
		box-sizing: border-box;
		/* margin-top: 20rpx; */
		border-radius: 15rpx;
	}
	
.factory_box {
	background-color: #FFF;
	padding: 20rpx;
	/* margin-top: 20rpx; */
	border-radius: 15rpx;
}
.factory_title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}
.factory_year {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99;
	font-size: 22rpx;
	text-align: center;
}

.factory_img {
	width: 30%;
	height: 290rpx;
	position: relative;
	border-radius: 15rpx;
	background-color: #EBEBEB;
}

.factory_img image {
	width: 100%;
	height: 100%;
	border-radius: 15rpx;
}

.factory_content {
	width: 68%;
	height: 290rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}


.factory_content_name {
	width: 85rpx;
	color: gray;
}

.factory_content_text {
	flex:1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.factory_img_item {
	width: 160rpx;
	height: calc(160rpx * 0.66);
	/* height: 120rpx; */
}

.factory_img_item image {
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}
</style>
